<template>
  <el-card class="box-card">
    <!-- 搜索框 -->
    <div class="left">
       <!-- <el-checkbox  v-model="checkAll">全选</el-checkbox>
          <el-checkbox-group v-model="checkedCities">
            <el-checkbox>待体检</el-checkbox>
            <el-checkbox>已完成</el-checkbox>
            <el-checkbox>已退款</el-checkbox>
        </el-checkbox-group> -->
      <el-radio-group v-model="radio">
        <!-- <el-radio v-model="radio" label="5">全选</el-radio> -->
        <el-radio v-model.number="radio" :label="2" style="margin-left:20px;">待体检</el-radio>
        <el-radio v-model.number="radio" :label="1">已完成</el-radio>
        <el-radio v-model.number="radio" :label="0">已退款</el-radio>
      </el-radio-group>
       <div class="block">
          <!-- <div class="demonstration">值：{{ tim }}</div> -->
          <el-date-picker
            v-model="value1"
            type="date"
            align="right"
            placeholder="开始预约日期  -  结束预约日期"
            style="width:260px"
            format="yyyy-MM-dd"
            >
          </el-date-picker>
        </div>
      <el-button class="btn" type="primary" @click="search">搜索</el-button>
    </div>
    <!-- table -->
    <el-table
      ref="multipleTable"
      :data="arr"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="姓名"
        width="120"
        prop="name">
      </el-table-column>
      <el-table-column
        prop="hospitalNum"
        label="就诊卡号"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="idNUm"
        label="身份证号"
        width="150"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号码"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="package1"
        label="套餐"
        width="120"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="cost"
        width="120"
        label="费用">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="100">
        <template slot-scope="{row}">
          <span>{{packageType[row.state]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="dateaphy"
        label="体检日期"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="makeTime"
        label="预约时间"
        show-overflow-tooltip>
      </el-table-column>
       <el-table-column
        label="操作"
        show-overflow-tooltip>
        <template slot-scope="$row"> 
          <button class="el-icon-edit" @click="handleClick($row)"></button>
        </template>
      </el-table-column>
    </el-table>



  </el-card>
</template>

<script>
export default {
  props:['arr'],
  data() {
    return {
      radio: '',
      packageType:{ //映射对象
       0:'已退款',
       1:'已完成',
       2:'待体检'
      },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        isShow:false
    }
  },
  computed:{
    tim(){
      return Date.parse(this.value1)
    }
  },
  methods: {
    handleSelectionChange(val) { //全选
      this.multipleSelection = val;
    },
    // 编辑
    handleClick(row){
      //  console.log(row);
       this.$emit('seeFormBtn',row)
    },
    // 搜索
    search(){
      if(this.radio||this.value1){
        this.$emit('searchBtn',this.radio,Date.parse(this.value1))
      }else{
         this.$message({
          message: '请勾选类型和日期再进行搜索',
          type: 'warning'
        });
      }
    }
  },
  
 
}
</script>

<style lang="less" scoped>
  .btn{
    background: #006eff;
    margin-left: 20px;
  }
  .el-icon-edit{
    font-size: 22px;
    color: #006eff;
    background: #fff;
  }
  .left{
    display: flex;
    align-items: center;
    .block{
      margin-left:15px;
    }
  }
</style>